<template>
    <view>
        <cu-custom bgColor="bg-gradual-green">
            <block slot="content">课程指南</block>
        </cu-custom>
        <!--导航栏-->
        <view class="calendar-content">
            <uni-tab-bar :tabBars="tabBars" :forTest="true" :changeTabIndex="currentTab" @displayModeChange="changeURL"/>
        </view>
        <!--导航栏——正在上课的课程提示：课中督课入口-->
        <view>
            <uni-list v-if="showChapterOn&&!showCalendar">
                <pop-item v-for="(item,index) in chapterOn" :key="index" :notif="getOnDetail(item)" @itempressed = "checkClass"></pop-item>
            </uni-list>
        </view>
        <!--导航栏——课程列表-->
        <view v-if="!showCalendar">
            <view v-for="(item,index) in courses" :key="index">
                <weapp-card :bg-color="index%2?'blue':'gray'" :title-large="true" :light="true" @click="clickCard(item)">
                    <template v-slot:title>
                        <view class="text-cut">{{ item.course.name }}</view>
                    </template>
                </weapp-card>
            </view>
        </view>
        <view v-if="!showCalendar && courses.length <= 0" class="no-notif text-lg text-bold flex justify-center">
            <text>当前没有课程哦～</text>
        </view>
        <!--导航栏——课程日历-->
        <view v-if="showCalendar">
            <calendar :selected="selected"></calendar>
        </view>
    </view>
</template>

<script>
import calendar from '../course/calendar.vue';
import popItem from './courseDetail/popItem.vue';
import uniTabBar from '@/components/third_party/uni-tabbar/uni-tabbar.vue';
import uniList from '@/components/third_party/uni-list/uni-list.vue';
import weappCard from '@/components/weapp-card/weapp-card';
import {getTodayInfo} from './index.js';


export default {
    components: {
        calendar,
        popItem,
        uniList,
        uniTabBar,
        weappCard
    },
    data() {
        return {
            title: 'Hello',
            tabBars: [{
                name: '课程列表',
                url: '',
                id: 'kechengliebiao'
            }, {
                name: '日历',
                url: '@/pages/course/calendar',
                id: 'rili'
            }],
            courses: [],
            chapterOn: [],
            currentTab: 0,
            showCalendar: false,
            showChapterOn: false,
            listTouchStart: 0,
            listTouchDirection: null,
            modalName: null,
            courseReady: false,
            selected: []
        };
    },
    onShow() {
        var token = getApp().globalData.user.token;
        if(!token || token == '')
            return;
        this.init();
    },
    methods: {
        async init() {
            let self = this;
            uni.getStorage({
                key: 'CourseWithChapter',
                success: (res) => {
                    self.courses = res.data;
                    self.chapterOn = [];
                    // 检查是否正在上课
                    for(var COURSE of self.courses)
                        for(var CHAPTER of COURSE.chapters) {
                            if(self.whetherIsOn(CHAPTER)) {
                                // 去重
                                let isIn = self.chapterOn.find(function(x) {
                                    return x.course_chapter_id === CHAPTER.course_chapter_id;
                                });
                                if(isIn == undefined)
                                    self.chapterOn.push({chapter: CHAPTER, course_name: COURSE.course.name});
                                self.showChapterOn = true;
                            }
                        }
                },
                fail: ()  => {
                    console.log('index:chapters the fail');
                }
            });
            uni.getStorage({
                key: 'FullCourses',
                success: (res) => {
                    // 去重
                    for(var e of res.data)
                    {
                        let hasThisInfo = self.selected.find(function(x) {
                            return x.course_id === e.course_id && x.course_chapter_id === e.course_chapter_id;
                        });
                        if(hasThisInfo == undefined)
                            self.selected.push(e);
                    }
                },
                fail: ()  => {
                    console.log('index:courses the fail ');
                }
            });
        },
        clickCard(e) {
            var toUrl = './courseDetail/courseSpecify';
            uni.navigateTo({
                url: toUrl + '?chapters=' + JSON.stringify({chapters: e.chapters, course_id: e.course.id, course_title: e.course.name})
            });
        },
        changeURL() {
            this.showCalendar = !this.showCalendar;
        },
        closePop(e) {
            if(e.show === false)
                this.showChapterOn = false;
        },
        whetherIsOn(e) {
            var info = getTodayInfo(new Date());
            var date = info.date;
            var time = info.time;
            return e.course_date === date && e.start_time < time && time < e.end_time;
        },
        getOnDetail(e) {
            return e.chapter.chapter_title;
        },
        checkClass() {
            uni.navigateTo({
                url: './courseOn/courseOn'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .no-notif{
        padding-top: 120px;
    }
</style>
